<template>
<div>
<!--  <el-row :gutter="10">
    <el-col :span="12">
      <div style="width:100%;height:300px;background-color: dodgerblue;"></div>
    </el-col>
    <el-col :span="12">
      <div style="width:100%;height:300px;background-color: red;"></div>
    </el-col>
  </el-row> -->
  <el-row>
    <el-col :span="6" style="border: 1px solid red;text-align: center;">
      <img style="width:100%" src="@/assets/logo.png">
        <div>一段描述</div>
    </el-col>
    <el-col :span="6" style="border: 1px solid red;text-align: center;">
      <img style="width:100%" src="@/assets/logo.png">
        <div>一段描述</div>
    </el-col>
    <el-col :span="6" style="border: 1px solid red;text-align: center;">
      <img style="width:100%" src="@/assets/logo.png">
        <div>一段描述</div>
    </el-col>
    <el-col :span="6" style="border: 1px solid red;text-align: center;">
      <img style="width:100%" src="@/assets/logo.png">
        <div>一段描述</div>
    </el-col>
  </el-row>
  <el-row>
      <el-col :span="24">
        <button>按钮</button>
        <el-button type="button">独特的按钮</el-button>
        <el-button type="primary">主要的按钮</el-button>
        <el-button type="danger">危险的按钮</el-button>
        <el-button type="warning">危险的按钮</el-button>

        <el-button type="button" plain>独特的按钮</el-button>
        <el-button type="primary" round>主要的按钮</el-button>
        <el-button type="danger" plain>危险的按钮</el-button>
        <el-button type="warning" plain>危险的按钮</el-button>
        <el-button type="button" circle>独</el-button>
        <el-button type="button" icon="el-icon-edit" circle>独</el-button>
        <el-button type="button" icon="el-icon-delete" circle>独</el-button>

        <el-button type="button" circle>独特的按钮</el-button>
      </el-col>
  </el-row>
  <el-row style="margin-top: 20px;">
    <el-col>
      <el-input style="width: 200px;"v-model="value" placeholder="请输入内容"></el-input>
      <el-input style="width: 200px;" type="textarea" v-model="value"></el-input>
      <el-input style="width: 200px;" show-password v-model="password"></el-input>
      <el-input style="width: 200px;" show-password prefix-icon="el-icon-search" v-model="password"></el-input>
      <el-input clearable style="width: 200px;" show-password suffix-icon="el-icon-user" v-model="password"></el-input>
    </el-col>
  </el-row>
  <el-row >
    <el-col>
      <el-autocomplete
      placeholder="请输入查找内容" :fetch-suggestions="querySearch"
      :trigger-on-focus="false"  v-model="qSearch"></el-autocomplete>
    </el-col>
  </el-row>
  <el-row>
      <el-select v-model="select" @change="changeSelect" multiple>
        <el-option value="a">
        </el-option>
        <el-option value="b">
        </el-option>
        <el-option value="c">
        </el-option>
      </el-select>
  </el-row>
  <el-row>
      <el-select v-model="select2" @change="changeSelect2" filterable>
        <el-option v-for="item in arrs" :label="item.label" :key="item.id" :value="item.id">
        </el-option>
      </el-select>
  </el-row>
  <el-row>
    <el-radio-group v-model="radio" @change="selectRadio">
      <el-radio label="男">

      </el-radio>
      <el-radio label="女">

      </el-radio>
    </el-radio-group>
  </el-row>
  <el-row>
    <el-radio-group v-model="radios" @change="selectRadios">
      <el-checkbox label="复选A">

      </el-checkbox>
      <el-checkbox label="复选B">

      </el-checkbox>
    </el-radio-group>
  </el-row>
  <el-row>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
    <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期和时间" value-format="yyyy-MM-dd" @change="changeDateTime"></el-date-picker>
  </el-row>
  <el-row>
    <el-date-picker v-model="daterange" @change="changeDateRange"
    type="daterange" value-format="yyyy-MM-dd"
    start-placeholder="开始日期"
    end-placeholder="结束日期">

    </el-date-picker>
  </el-row>
  <el-row style="margin:20px 0">
    <el-table :data="tableData" border :header-cell-style="{background:'aliceblue',fontSize:'16px'}">
      <el-table-column label="序号" prop="id">
      </el-table-column>
      <el-table-column label="名称" prop="name">
      </el-table-column>
      <el-table-column label="地址" prop="address">
      </el-table-column>
      <el-table-column label="年龄" prop="age">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="edit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</div>
</template>

<script>
  export default {
    name:'Element',
    data(){
      return{
        tableData:[
          {name:'giegie',address:'guangzhoU',id:1,age:'30'},
          {name:'giegie2',address:'guangzhoU',id:2,age:'30'},
          {name:'giegie3',address:'guangzhoU',id:3,age:'30'}
        ],
        value:'',
        password:'',
        qSearch:'',
        coffees:[
          {value:'aaa'},
          {value:'bbb'},
          {value:'ccc'}
        ],
        select:'',
        arrs:[
          {label:'aaaaa',id:1},{label:'bbbbb',id:2},{label:'ccccc',id:3}
        ],
        select2:'',
        radio:'',
        radios:[],
        date:'',
        datetime:'',
        daterange:''
      }
    },
    methods:{
      querySearch(query,cb){
        let result = query ?this.coffees.filter(v=>v.value.includes(query)):this.coffees;
        cb(result);
      },
      changeSelect(){
        console.log(this.select);
      },
      changeSelect2(){
        console.log(this.select2);
      },
      selectRadio(){
        alert(this.radio);
      },
      selectRadios(){
        console.log(this.radios);
      },
      changeDate(){
        console.log(this.date);
      },
      changeDateTime(){
        console.log(this.datetime);
      },
      changeDateRange(){
        console.log(this.daterange);
      },
      edit(row){
        //alert(row.name);
        //this.$message.success(row.name);
        //this.$message.warning(row.name);
        //this.$notify.success(row.name);
        //this.$notify.warning(row.name);

        this.$confirm(
          '这是啥','提示',{
           type:'warning'
          }).then(res=>{
            this.$message.success("我点击了确认")
          }).catch(()=>{
              this.$message.warning("我点击了取消")
          })
      }
    }
  }
</script>

<style>
</style>
